<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('购买')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-order-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-8">
                <img th:src="${petInfo.img}" style="height: 180px;width: 300px;"/>
                <input name="petImg" th:value="${petInfo.img}" class="form-control" type="hidden">
                <input name="petId" th:value="${petInfo.id}" class="form-control" type="hidden">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品名：</label>
            <div class="col-sm-8">
                <input name="petName" th:value="${petInfo.name}" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">单价：</label>
            <div class="col-sm-8">
                <input class="form-control" id="price" th:value="${petInfo.price}" readonly type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">库存：</label>
            <div class="col-sm-8">
                <input class="form-control" th:value="${petInfo.count}" readonly type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">数量：</label>
            <div class="col-sm-8">
                <input name="number" id="number" class="form-control" type="number" min="1" value="1"
                       onchange="setTotalPrice()">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">总价：</label>
            <div class="col-sm-8">
                <input name="totalPrice" id="totalPrice" class="form-control" readonly type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input name="userName" class="form-control" type="text" th:value="${session.userInfo.userName}"
                       readonly>
                <input name="userId" class="form-control" type="hidden" th:value="${session.userInfo.userId}" readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">地址：</label>
            <div class="col-sm-8">
                <select class="form-control" name="addressId" id="addressId">
                    <option th:each="item:${petAddresses}" th:value="${item.id}"
                            th:text="${item.name}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "pc/petOrder"
    $("#form-order-add").validate({
        focusCleanup: true
    });

    function submitHandler() {

        var addressId = $("#addressId ").val();
        if(!addressId){
            $.modal.alertError("请到个人中心添加地址");
            return;
        }
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-order-add').serialize());
        }
    }

    $(function(){
        setTotalPrice();
    });

    function setTotalPrice() {
        let count = $("#number").val();
        let price = $("#price").val();
        let totalPrice = count * price;
        $("#totalPrice").val(totalPrice)
    }
</script>
</body>
</html>
